<template>
  <div>
    <!-- 新增回访记录 -->
    <el-dialog v-model="dialogVisible" title="新增回访记录" width="500" :before-close="handleClose">
      <span>
        <!-- 表单 -->
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
          status-icon>
          <el-form-item label="回访内容：" prop="content">
            <el-input v-model="ruleForm.content" placeholder="请输入咨询内容" />
          </el-form-item>
          <el-form-item label="计划回访日期：" prop="callbackTime">
            <el-date-picker v-model="ruleForm.callbackTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择"
              style="width: 100%" />
          </el-form-item>

        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, reactive } from 'vue';
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { AddParams } from '../../../../api/market/callback/type'
import { addCallback } from '../../../../api/market/callback/callback'

const emit = defineEmits(['close'])
//dialog默认显示
const dialogVisible = ref(true)
const ruleFormRef = ref<FormInstance>()

const route = useRoute();

const ruleForm = reactive<AddParams>({
  id: 0,
  questionId: 0,
  callbackTime: "",
  content: ""
})


if (route.query.id) ruleForm.questionId = Number(route.query.id)


//取消
const handleClose = () => {
  emit('close')
}

//规则
const rules = reactive<FormRules<AddParams>>({
  content: [
    { required: true, message: '请输入回访内容', trigger: 'blur' },
  ],
  callbackTime: [
    {
      required: true, message: '请选择计划回访日期', trigger: 'change',
    },
  ],
})

//确定
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // console.log(ruleForm);
    
      let res = await addCallback(ruleForm);
      ElMessage({
        message: '添加成功',
        type: 'success',
        plain: true,
      })
      emit('close', true)
    } else {
      ElMessage({
        message: 'error submit!',
        type: 'warning',
      })
    }
  })
}
</script>

<style scoped></style>